<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" v-slot="scord" label="Date" width="180">
        <el-input
          @keyup.native="keyMove(scord,$event)"
          type="text"
          :ref="`tableData${scord.column.property}${scord.$index}_ref`"
          v-model="tableData[scord.$index][scord.column.property]"
        />
      </el-table-column>
      <el-table-column prop="name" label="Name" v-slot="scord" width="180">
        <el-input
          @keyup.native="keyMove(scord,$event)"
          type="text"
          :ref="`tableData${scord.column.property}${scord.$index}_ref`"
          v-model="tableData[scord.$index][scord.column.property]"
        />
      </el-table-column>
      <el-table-column prop="address" v-slot="scord" label="Address">
        <el-input
          @keyup.native="keyMove(scord,$event)"
          :ref="`tableData${scord.column.property}${scord.$index}_ref`"
          v-model="tableData[scord.$index][scord.column.property]"
        />
      </el-table-column>
      <el-table-column prop="age" label="age"></el-table-column>
    </el-table>

    <div
      v-for="(item,i) in tableData"
      :class="{item1: i == currentIndex }"
      @mouseover="handleMouseOver(i)"
      @mouseout="handleMouseOut"
      class="item2"
    >
      <span :class="{item3:i==0||i==1||i==2,item1: i == currentIndex}">{{i+1 + "."}}</span>
      {{item.name}}
    </div>

    <!-- 打印测试 -->
    <el-button v-print="'print'">打印</el-button>
    <div>
      <div id="print">
        <div class="head">
          <div style="text-align:center">头部内容</div>
          <div>测试内容111</div>
        </div>

        <div class="list">
          <div
            class="list_item"
            v-for="item in 150"
            style="width:100%;border:1px solid #ccc"
          >{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Print from "vue-print-nb";
import Vue from "vue";
Vue.use(Print);
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-031",
          name: "Tom",
          address: "地址1",
          age: 14
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "地址2",
          age: 14
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "地址3",
          age: 14
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "地址4",
          age: 14
        }
      ],
      currentIndex: 0,
      interval: ""
    };
  },
  created() {
    this.startInterval();
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.interval);
  },
  methods: {
    startInterval() {
      // 每隔一秒切换选中的元素
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.tableData.length;
      }, 1000);
    },
    handleMouseOver(index) {
      // 鼠标移入时暂停定时器并改变样式
      clearInterval(this.interval);
      this.currentIndex = index;
    },
    handleMouseOut() {
      // 鼠标移出时恢复定时器
      this.startInterval();
    },

    keyMove(scord, event) {
      //   console.log(scord);
      //   判断是否按下了ctrl键
      if (event.ctrlKey) {
        this.moveFouce(this.tableData, scord, event.keyCode);
      }
    },
    moveFouce(num, scord, keyCode) {
      var that = this.$refs;
      var row = scord.row; //当前行
      var property = scord.column.property; //列字段
      var obj = Object.keys(row); //字段名数组（总共几列）
      var rowLength = obj.length; //总共几列
      var index = obj.indexOf(property); //列索引
      var dataIndex = scord.$index; //行索引
      var refName;
      switch (keyCode) {
        case 37: // 左箭头
          refName = `tableData${obj[index - 1]}${dataIndex}_ref`;
          //   如果是第一列，往左移动，默认还是当前列
          if (index == 0) {
            refName = `tableData${obj[0]}${dataIndex}_ref`;
          }
          break;
        case 38: // 上箭头
          // 如果是第一行还按了上，则默认第一行
          refName = `tableData${obj[index]}${dataIndex - 1}_ref`;
          if (dataIndex == 0) {
            refName = `tableData${obj[index]}0_ref`;
          }

          break;
        case 39: // 右箭头
          refName = `tableData${obj[index + 1]}${dataIndex}_ref`;
          //   如果是最后一列，往右移动，默认是最后一行不动
          if (index == rowLength - 1) {
            refName = `tableData${obj[rowLength - 1]}${dataIndex}_ref`;
          }

          break;
        case 40: // 下箭头
          // 如果是最后一行还按了上，则默认最后一行
          let tableLen = this.tableData.length;
          refName = `tableData${obj[index]}${dataIndex + 1}_ref`;
          if (dataIndex == tableLen - 1) {
            refName = `tableData${obj[index]}${tableLen}_ref`;
          }

          break;
      }
      if (!refName || that[refName] == undefined) {
        return;
      }
      that[refName].focus();
    }
  }
};
</script>
<style scoped>
.item2 {
  width: 200px;
}

.item3 {
  color: red;
}
.item1 {
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}
/* 列表项样式 */
.list_item {
  /* 设置每个列表项换行 */
  page-break-inside: avoid;
}
/* 显示固定内容 */
.head {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* 在每页之前插入分页符 */
.list {
  break-before: always;
  margin-top: 50px;
}
/* 定义打印样式 */
@media print {
  /* 显示固定内容 */
  .head {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* 在每页之前插入分页符 */
  .list {
    break-before: always;
    margin-top: 50px;
  }
}
</style>

